<template>
  <div id="sy_record">
    <div
      v-if="record.finished && record.items.length == 0 && record.page == 1"
      v-cloak
    >
      <div class="no-data aui-text-center aui-text-9">
        <i class="iconfont icon-lujing1161"></i>
        <div class="aui-ftn16">空空如也~</div>
      </div>
    </div>
    <van-list
      v-model="record.loading"
      :finished="record.finished"
      :finished-text="text"
      :immediate-check="false"
      :offset="100"
      @load="initData"
    >
      <div
        class="item aui-margin-b-10 aui-bg-f"
        v-for="(item, index) in record.items"
        :key="index"
        v-cloak
      >
        <van-row class="content">
          <van-col span="4" @click="fnOpenOrderDetail(item.id, item.typenum)">
            <div
              class="good-img"
              v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }"
              v-lazy="item.image"
            ></div>
          </van-col>
          <van-col
            span="20"
            class="cont aui-padded-l-10"
            @click="fnOpenOrderDetail(item.id, item.typenum)"
          >
            <div>
              <span class="label" v-text="item.type"></span>
              <span class="aui-ftn12 aui-text-7">
                下单{{ item.price }}元 返{{ item.back_price }}元</span
              >
            </div>
            <div
              class="aui-ftn12 aui-text-7 aui-padded-t-5 aui-padded-b-5"
              v-text="item.createtime"
            ></div>
            <div class="aui-ftn12 aui-text-7 aui-padded-b-5">试用ID：{{ item.id }}</div>
            <span class="aui-ftn12 aui-text-f issd-btn">{{item.issd ? '商家手动返款' : '系统自动返款'}}</span>
            <div
              class="
                btn
                aui-bg-f aui-text-center aui-ftn12 aui-text-red
              "
              :class="{ passed: item.status == 4 || item.status == 2 }"
              v-if="item.status == 4 || item.status == 2"
              v-text="item.statusname"
            ></div>
            <div
              class="btn aui-ftn12 aui-bg-f aui-text-7"
              v-text="item.statusname"
              v-else
            ></div>
          </van-col>
        </van-row>
        <div
          class="tags aui-ftn12 aui-text-red aui-padded-10"
          style="border-bottom: 1px dashed #eee"
        >
          下单买号：{{ item.buynum }}
        </div>
        <!-- 未审核 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-red
            aui-padded-l-10
            aui-padded-r-5
          "
          v-if="item.status != 4"
        >
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 1"
            >等待商家审核申请!
            <span v-if="item.exittime > 0"><van-count-down
              :time="item.exittime * 1000"
              @finish="fnLoadMore"
              format="DD 天 HH 时 mm 分 ss 秒"
            />
            未审核将自动失效！</span></div
          >
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 3"
            >等待商家审核订单!
            <span v-if="item.exittime > 0"
              ><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒"
            />未审核将自动通过！</span>
            </div
          >
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 2">
            请购买并填写订单号!
            <span v-if="item.exittime > 0"
              ><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />未填写将自动过期！</span
            ></div
          >
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 5">
            <span v-if="item.issd">商家已打款本金{{item.price}}元到绑定的支付宝帐户:{{item.toalipay}},</span>
            等待商家结算!
            <span v-if="item.exittime > 0"
              ><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />未操作将自动结算！</span
            >
          </div>
          <!-- 待试客预览 -->
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 11">
            请搜索收藏加购,商家审图通过后再下单!
            <span v-if="item.exittime > 0"
              ><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />未上传将自动过期!</span
            ></div
          >
          <!-- 待商家审图 -->
          <div class="aui-padded-t-10 aui-padded-b-10"  v-if="item.status == 12"
            >请等待商家审核收藏加购截图!<span v-if="item.exittime > 0"
              ><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />未审核将自动通过!</span
            ></div
          >

           <!-- 待追评 -->
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 13"
            >
            <span v-if="item.issd">商家已打款本金{{item.price}}元到绑定的支付宝帐户:{{item.toalipay}},</span>
            请等待商家给出追加评语与追评图片<span v-if="item.exittime > 0"
              >,<van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />后再操作!</span
            ></div
          >
          <!-- 待商家打款 -->
          <div class="aui-padded-t-10 aui-padded-b-10" v-if="item.status == 14">
            等待商家打款本金到绑定的支付宝账户：{{item.toalipay}}，试用完成后再结算佣金！
            <span v-if="item.exittime > 0"><van-count-down
                :time="item.exittime * 1000"
                @finish="fnLoadMore"
                format="DD 天 HH 时 mm 分 ss 秒" />内未打款将自动设为无效的订单!</span>
          </div> 
        </div>
        <!-- 通过的订单 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-red
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 4"
        >
        <span v-if="item.issd">商家已打款本金{{item.price}}元到绑定的支付宝帐户:{{item.toalipay}},</span>
          如收到货,请<span v-if="item.exittime"
            ><van-count-down
              :time="item.exittime * 1000"
              @finish="fnLoadMore"
              format="DD 天 HH 时 mm 分 ss 秒"
            />后</span
          >确认评价!
        </div>
        <!-- 已完成 -->
        <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;" v-if="item.status == 6">
            <div
            v-if="!item.issd"
              class="
                tags
                aui-ftn12
                aui-text-7
                aui-padded-l-10
                aui-padded-r-5
                aui-padded-t-10
                aui-padded-b-10
              "
              style="flex:1"
            >
              已返款{{ item.back_price }}元到您的试用帐户!
            </div>
            <div
            v-else
              class="
                tags
                aui-ftn12
                aui-text-7
                aui-padded-l-10
                aui-padded-t-10
                aui-padded-b-10
              "
              style="flex:1"
            >
              商家已打款本金{{item.price}}元到绑定的支付宝帐户:{{item.toalipay}},平台已结算佣金{{item.all_red}}元！
            </div>
          <!-- <div
            class="
              aui-text-right
              aui-padded-r-5
              aui-padded-t-10
              aui-padded-b-10
              aui-text-red
              aui-ftn13
            "
            style="width: max-content;"
            v-if="!item.content"
            @click="fnOpenComment(item.id)"
          >
            去评价
          </div> -->
          <!-- <div
           style="width: max-content;"
            class="
              aui-text-right
              aui-padded-r-5
              aui-padded-t-10
              aui-padded-b-10
              aui-text-7
              aui-ftn13
            "
            v-else
          >
            已评价
          </div> -->
        </div>
        <!-- 不允许参加 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 7"
        >
          商家审核您未获得试用资格！
        </div>
        <!-- 已过期 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 8"
        >
          您长时间没有参加该试用，已过期！
        </div>
        <!-- 订单号无效 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
            order-warning
          "
          v-if="item.status == 9"
        >
          <div class="aui-padded-r-5">
            商家审核订单号无效，请去退款！
            <span class="aui-text-red">理由: {{ item.wrongwarn }}</span>
          </div>
          <div
            class="aui-bg-red aui-text-f aui-text-center del-btn"
            @click="fnDelOrder(item.id)"
          >
            删除
          </div>
        </div>
        <!-- 驳回的订单 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 10"
        >
          商家退回了您提交的“确认收货评价”！
          <span class="aui-text-red">理由: {{ item.backwarn }}</span>
        </div>   
        <!-- 打款驳回 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 15"
        >
          商家驳回了打款！
          <span class="aui-text-red">理由: {{item.dawarn ? item.dawarn : '无'}}</span>
        </div> 
        <!-- 单号驳回 -->
        <div
          class="
            tags
            aui-ftn12
            aui-text-7
            aui-padded-l-10
            aui-padded-r-5
            aui-padded-t-10
            aui-padded-b-10
          "
          v-if="item.status == 16"
        >
          商家驳回了单号！
          <span class="aui-text-red">理由: {{item.danwarn ? item.danwarn : '无'}}</span>
        </div>
      </div>
      
    </van-list>
    <!-- 评价 -->
    <!-- <van-popup v-model="comment.show">
      <div class="wrapper">
        <div class="sy_comment aui-bg-f">
          <div class="content">
            <van-row>
              <van-col span="6" class="aui-text-3 aui-ftn12">填写评价</van-col>
              <van-col span="18" class="aui-text-3 aui-ftn12">
                <textarea
                  name="pj"
                  id=""
                  cols="35"
                  rows="3"
                  v-model="comment.content"
                  class="input"
                ></textarea>
              </van-col>
            </van-row>
            <van-row class="aui-padded-t-10">
              <van-col span="6" class="aui-text-3 aui-ftn12"
                >试用品截图</van-col
              >
              <van-col span="8">
                <div class="img_cont aui-text-center">
                  <van-uploader :after-read="afterRead">
                    <span
                      class="aui-ftn12 aui-text-7"
                      v-if="!comment.comment_background"
                      v-cloak
                      >试用品截图</span
                    >
                    <div
                      class="img"
                      v-else
                      v-bind:style="{
                        backgroundImage:
                          'url(' + comment.comment_background + ')',
                      }"
                      v-lazy="comment.comment_background"
                      v-cloak
                    ></div>
                  </van-uploader>
                </div>
              </van-col>
            </van-row>
          </div>
          <van-row>
            <van-col span="12">
              <div
                class="btn aui-bg-red aui-ftn16 aui-text-center aui-text-f"
                @click="fnConfirmComment"
              >
                确定
              </div>
            </van-col>
            <van-col span="12">
              <div
                class="
                  btn
                  close_btn
                  aui-bg-f aui-ftn16 aui-text-center aui-text-7 aui-border-t
                "
                @click="comment.show = false"
              >
                关闭
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
import Record from "../../../service/record.js";
export default {
  data() {
    return {
      search: {
        title: "",
        ordernum: "",
      },
      cur: 0,
      type_id: 0,
      check: false,
      text: "",
      record: {
        loading: true,
        finished: false,
        items: [],
        page: 0,
        limit: 20,
      },
      // comment: {
      //   show: false,
      //   comment_background_file: "",
      //   comment_background: "",
      //   content: "",
      //   order_id: "",
      //   uid: "",
      // },
      loading: false,
    };
  },
  props: ["index"],
  created() {
    // this.comment.uid = this.$store.state.uid;
  },
  methods: {
    // fnOpenComment(id) {
    //   this.comment.order_id = id;
    //   this.comment.show = true;
    // },
    // afterRead(file) {
    //   //判断图片的大小，单位是字节
    //   if (file.file.size > 2 * 1024 * 1024) {
    //     let vm = this;
    //     this.utils.fnChangeFile(file, { w: 200, h: 300 }, function (res) {
    //       vm.fnUpload(res);
    //     });
    //   } else {
    //     // 符合大小的，直接上传
    //     this.fnUpload(file);
    //   }
    // },
    // // 上传相关图片
    // fnUpload: function (file) {
    //   if (file) {
    //     this.comment.comment_background_file = file.file;
    //     this.comment.comment_background = file.content;
    //   }
    // },
    // fnConfirmComment: function () {
    //   let { comment_background_file, content, order_id, uid } = this.comment;
    //   if (!!content) {
    //     if (!this.comment.comment_background) {
    //       this.utils.fnMsg("请上传评价图片");
    //       return false;
    //     } else {
    //       // api
    //       let param = new FormData(); // 创建form对象
    //       let _param = {
    //         order_id: order_id,
    //         image: comment_background_file,
    //         content: content,
    //         uid: uid,
    //       };
    //       for (var i in _param) {
    //         param.append(i, _param[i]); // 添加form表单中其他数据
    //       }
    //       Record.fnOrderComment(param).then((data) => {
    //         if (data) {
    //           this.utils.fnMsg(data.msg);
    //           if (data.status) {
    //             var vm = this;
    //             setTimeout(function () {
    //               vm.comment.show = false;
    //               (vm.comment.comment_background_file = ""),
    //                 (vm.comment.comment_background = ""),
    //                 (vm.comment.content = "");
    //               vm.fnClearData(vm.type_id, vm.check, vm.search);
    //             }, 2000);
    //           }
    //         }
    //       });
    //     }
    //   } else {
    //     this.utils.fnMsg("请填写评语");
    //     return false;
    //   }
    // },
    initData: function () {
      setTimeout(() => {
        if (this.record.loading && !this.record.finished && !this.loading) {
          this.loading = true;
          this.record.page++;
          Record.fnGetSyRecord({
            p: this.record.page,
            n: this.record.limit,
            uid: this.$store.state.uid,
            type: this.check ? "using" : "all",
            status: this.index && this.index != -1 ? this.type_id : "",
            title: this.search.title,
            ordernum: this.search.ordernum,
            isToken: true,
            isLoading: true,
          }).then((res) => {
            this.loading = false;
            // 加载状态结束
            this.record.loading = false;
            if (res && res.status) {
              this.record.items = this.record.items.concat(res.data);
            } else {
              this.record.finished = true;
              this.text = this.record.items.length > 0 ? "没有更多了" : "";
            }
          });
        }
      }, 100);
    },
    // 查看订单打款详情
    fnOpenPayDetail () {
      this.utils.fnOpenCommon(this, { name: "pay", query: { title: "打款详情"}});
    },
    fnLoadMore: function () {
      this.record.page = 0;
      this.record.finished = false;
      this.record.loading = true;
      this.record.refreshing = false;
      this.text = "";
      this.record.items = [];
      this.initData();
    },
    fnOpenOrderDetail: function (id, type) {
      if (parseInt(this.type_id) == 17) {
        this.utils.fnOpenCommon(this, {
          name: 'pay',
          params: { order_id:id },
          query: { title: "打款详情" }
        });
      } else {
        this.utils.fnOpenCommon(this, {
          name: type < 5 ? "sy_record_detail" : "dou_record_detail",
          params: { order_id: id }
        });
      }
    },
    
    // 筛选功能
    fnSelectData: function (index, title, order_num) {
      this.search = {
        title: title,
        ordernum: order_num,
      };
      // 筛选api
      this.fnChangeItem(index);
    },
    // 重新获取数据
    fnClearData: function (type_id, check, search) {
      this.type_id = type_id;
      this.check = check;
      this.search = search;
      this.record.page = 0;
      this.record.finished = false;
      this.record.loading = true;
      this.record.refreshing = true;
      this.text = "";
      // 清空列表数据
      this.record.items = [];
      this.initData();
    },
    fnDelOrder (id) {
      this.$dialog.confirm({
            title: '标题',
            message: '确定删除该订单?',
          })
          .then(() => {
            // on confirm
            Record.fnOrderUpdate({order_id: id, type: 'delete', isToken: true}).then(res => {
              if (res) {
                this.utils.fnMsg(res.msg);
                if (res.status) {
                    this.fnClearData(this.type_id, this.check, this.search);
                }
              }
            })
          })
          .catch(() => {
              // on cancel
          });
    }
  },
};
</script>
<style scoped lang="scss">
.van-count-down {
  color: var(--pink) !important;
  display: inline-block !important;
}
div#sy_record {
  .order-warning {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .order-warning .del-btn {
    border-radius: 3px;
    padding: 2px 6px;
    flex: 0 0 10%;
  }
  .item {
    .content {
      position: relative;
      padding: 5px 10px;
      border-bottom: 1px dashed #eee;
      .label {
        padding: 3px 5px;
        border-radius: 3px;
        background-color: #666;
        color: #fff;
        font-size: 12px;
      }
      .tag {
        background-color: #666;
        padding: 2px 5px;
        border-radius: 3px;
      }
      .btn {
        position: absolute;
        right: 5px !important;
        bottom: 5px;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #777;
      }
      .btn.passed {
        border-color: var(--pink);
      }
      .issd-btn {
        padding: 2px 4px;
        border-radius: 3px;
        background-color: var(--pink);
      }
    }
  }
}

.van-popup--center {
  right: 20px !important;
  left: 20px !important;
  border-radius: 4px !important;
  margin: auto;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

div.sy_comment div.content {
  padding: 20px 10px;
  .input {
    border: 1px solid #ddd;
    border-radius: 3px;
  }
}
div.sy_comment .img_cont {
  width: 100px;
  height: 150px;
  line-height: 150px;
  background-color: #f2f2f2;
  margin: auto;
}

div.sy_comment .img_cont .img {
  width: 100px;
  height: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.sy_comment div.img_b div.img {
  width: 100px;
  height: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;
}
div.sy_comment div.content div.tags {
  line-height: 22px;
  padding: 20px 0;
}
div.sy_comment div.btn {
  height: 40px;
  line-height: 40px;
  border-radius: 0 0 0 4px;
}
div.sy_comment div.close_btn {
  border-radius: 0 0 4px 0;
}
</style>
